<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<style>
.v-enter, .v-leave-to{opacity:0;color:red}
.v-enter-active, .v-leave-active{transition:opacity 1s; }
</style>
</head>
<body>
<div id="app">
	<div>
		<transition mode='out-in'>
			<component :is='tog? `component1`: `component2`'></component>
		</transition>
		<button @click='tog=!tog'>点击切换</button>
	</div>
</div>
<script>
	Vue.component('component1',{
		template:'<div>组件1</div>'
	})
	Vue.component('component2',{
		template:'<div>component2</div>'
	})
	vm=new Vue({
		el:'#app',
		data:{
			componentType:'component1',
			tog:true
		}
	});
</script>
</html>